<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
</head>

<body>
<div class="layui-container">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>seata mybatis plus demo</legend>
    </fieldset>
    <div style="margin-top: 30px;">
        <button type="button" class="layui-btn" id="add">新增</button>
        <button type="button" class="layui-btn" id="adderror">模拟出错新增</button>
        <button type="button" class="layui-btn" id="reload">刷新</button>
    </div>

    <div class="layui-row">
        <div class="layui-col-xs6">
            seata-user数据
            <table class="layui-hide" id="user"></table>
        </div>
        <div class="layui-col-xs6">
            seata-account数据
            <table class="layui-hide" id="account"></table>
        </div>
    </div>
</div>


<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['layer', 'table'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;

        var user = table.render({
            elem: '#user'
            , url: '/'
            , cols: [[
                {field: 'id', title: 'ID'}
                , {field: 'text', title: 'text'}
                , {field: 'date', title: 'date'}
            ]], parseData: function (res) {
                return {
                    "code": 0,
                    "msg": "success",
                    "data": res.user
                };
            }
        });

        var account = table.render({
            elem: '#account'
            , url: '/'
            , cols: [[
                {field: 'id', title: 'ID'}
                , {field: 'text', title: 'text'}
                , {field: 'date', title: 'date'}
            ]], parseData: function (res) {
                return {
                    "code": 0,
                    "msg": "success",
                    "data": res.account
                };
            }
        });

        $("#reload").click(function () {
            user.reload();
            account.reload();
        });
        $("#add").click(function () {
            add(false);
        });
        $("#adderror").click(function () {
            add(true);
        });

        function add(flag) {
            $.ajax({
                url: "/", type: "post", data: {flag: flag}, success: function (res) {
                    console.debug(res)
                    layer.msg("新增成功")
                }, error: function (res) {
                    console.debug(res)
                    layer.alert(res.responseJSON.message)
                }, complete: function () {
                    user.reload();
                    account.reload();
                }
            });
        }
    });
</script>
</body>

</html>